import React, { FC, useState } from "react";
import styles from "./StyleType.module.scss";
import {
  pageComponentsState,
  blockActiveIndexState,
  componentActiveIndexState,
} from "store/modules/element";
import { SketchPicker } from "react-color";
import { useRecoilState } from "recoil";
import { Row, Col, Input, Popover } from "antd";

const StyleType: FC = () => {
  const [pageComponentList, setPageComponentList] =
    useRecoilState(pageComponentsState);
  const [blockActiveIndex] = useRecoilState(blockActiveIndexState);
  const [componentActiveIndex] = useRecoilState(componentActiveIndexState);
  const [backgroundVisible, setBackgroundVisible] = useState(false);
  const [colorVisible, setColorVisible] = useState(false);
  const [backgroundColor, setBackgroundColor] = useState();
  const handleChangeBackground = (color: any, attr: string) => {
    let { rgb } = color;
    let { r, g, b, a } = rgb;
    let newPageComponentList = JSON.parse(JSON.stringify(pageComponentList));

    let blockObject = newPageComponentList[blockActiveIndex];
    blockObject.children[componentActiveIndex].properties.style.value[
      attr
    ] = `rgba(${r},${g},${b},${a})`;
    setBackgroundColor(color);
    setPageComponentList(newPageComponentList);
  };
  return (
    <div className={styles.styleType}>
      <Row className={styles.propItem}>
        <Col span={6}>填充</Col>
        <Col span={18}>
          <Popover
            title="Title"
            trigger="click"
            visible={backgroundVisible}
            onVisibleChange={() => {
              setBackgroundVisible(!backgroundVisible);
            }}
            content={
              <SketchPicker
                color={backgroundColor}
                onChangeComplete={(color) => {
                  handleChangeBackground(color, "backgroundColor");
                }}
              />
            }
          >
            <div
              style={{
                backgroundColor: JSON.parse(JSON.stringify(pageComponentList))[
                  blockActiveIndex
                ].children[componentActiveIndex].properties.style.value
                  .backgroundColor,
              }}
              className={styles.blockBackground}
            ></div>
          </Popover>
        </Col>
      </Row>
      <Row className={styles.propItem}>
        <Col span={12}>
          <Popover
            title="Title"
            trigger="click"
            visible={colorVisible}
            onVisibleChange={() => {
              setColorVisible(!colorVisible);
            }}
            content={
              <SketchPicker
                color={backgroundColor}
                onChangeComplete={(color) => {
                  handleChangeBackground(color, "color");
                }}
              />
            }
          >
            <div
              style={{
                backgroundColor: JSON.parse(JSON.stringify(pageComponentList))[
                  blockActiveIndex
                ].children[componentActiveIndex].properties.style.value.color,
              }}
              className={styles.blockBackground}
            ></div>
          </Popover>
        </Col>
        <Col span={12}>
          <Input
            addonBefore="字号"
            style={{ width: "130px" }}
            value={
              JSON.parse(JSON.stringify(pageComponentList))[blockActiveIndex]
                .children[componentActiveIndex].properties.style.value.fontSize
            }
          />
        </Col>
      </Row>
    </div>
  );
};

export default StyleType;
